<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script src="/statics/js/supe.js"></script>
<script src="/statics/js/jquery.js"></script>

<link href="http://i.autocar.com/res/css/admin_style.css" rel="stylesheet" />

</head>

<body>

<ul class="single_list cc">
    <li><label>颜色设置：</label>
        <span class="color_pick J_color_pick"><em style="background:#000000;"></em></span>
        <input class="J_hidden_color" name="markFontcolor" type="hidden" value="#000000">
    </li>
    <li>
        <label>发帖时间：</label>
        <input type="text" class="input length_2 mr5 J_date date">
        -
        <input type="text" class="input length_2 J_datetime date">
    </li>
    <li>
        <input type="button" class="button J_button" value="打开窗体">
    </li>
</ul>


<script>
$(function(){
    var colorPick = $('.J_color_pick');
    if(colorPick.length) {
        Supe.use('colorPicker',function(){
            $(colorPick).colorPicker({
                default_color : 'url("/statics/js/colorpicker/transparent.png")',        //
                callback:function(color) {
                    var em = $(this).find('em'),
                        input = $(this).next('.J_hidden_color');

                    em.css('background',  color);
                    input.val(color.length === 7 ? color : '');
                }
            });
        });
    }

    //日期选择器
    var dateInput = $("input.J_date")
    if(dateInput.length) {
        Supe.use('datePicker',function() {
            dateInput.datePicker();
        });
    }

    //日期+时间选择器
    var dateTimeInput = $("input.J_datetime");
    if(dateTimeInput.length) {
        Supe.use('datePicker',function() {
            dateTimeInput.datePicker({time:true});
        });
    }

    var button = $("input.J_button");
    if(button.length) {
        Supe.use('dialog',function() {
            button.click(function(){
                //$.dialog({content: 'hello world'});
                $.dialog.alert('xxxxx');
            });
        });
    }

});</script>
</body>
</html>

